<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chnildern -refs-parent的使用</title>
    <script src="../../js/common/vue/vue.js"></script>
</head>
<body>
 获取父组件<br/>
  $parent获取父组件<br/>
获取子组件<br/>
 方式一 $refs 获取子组件，返回的是一个对象，这个对象中以键值对的方式对的子组件。（需要在添加属性 ref="aa"）<br/>
 方式二  $children获取子组件 ，返回的是一个组数，根据下标获取子组件<br/>
 一般推荐使用 $refs 获取子组件，因为如果通过下标获取，下标可能在后续开发中会变。但是键值对的就不会变。<br/>
  在需要获取所有的子组件时推荐使用children。<br/>
 $Root 获取vue 实例 。
<div id="app">
    <h2>{{message}}</h2>
    <cpn1  ref="aa" ></cpn1>
    <button v-on:click="showMessage(1)">父组件的按钮</button>
</div>
<template id="template1">
    <div>
        <h2>子组件</h2>
        <button v-on:click="showMessage(1)">子组件的按钮</button>
    </div>

</template>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '父组件'
        },
        methods:{
            showMessage:function(type){
                console.dir('$children：'+this.$children[0].message);
                console.dir('$refs：'+this.$refs.aa.message);
            }
        },
        components:{
            cpn1:{
                template:'#template1',
                data(){
                    return{
                        message:'子组件的数据'
                    }
                }
                ,methods:{
                    showMessage:function () {
                        console.dir('$parent:'+this.$parent.message)
                    }
                }
            }

        }
    })
</script>
</body>
</html>